<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@include file="../common/taglibs.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><spring:message code="webapp.menu.user.password" /></title>
<!-- meta -->
<meta name="menu-user" content="nav-active" />
<meta name="menu-user-password" content="active" />
</head>

<body>
	<div>
		<div style="padding: 10px 0 10px 60px; margin: 30px 20px;">
			<form id="passwordForm" name="passwordForm" method="post" action="/opUserAccount/password/update">
				<input id="captchaKey" type="hidden" name="captchaKey" />
				<table
					style="width: auto; word-wrap: break-word; word-break: break-all;">
					<tr>
						<td style="width: 120px;text-align: right;"><spring:message code="webapp.page.user.password.old" /></td>
						<td style="padding:5px 20px;"><input class="form-control" type="password"
							name="password" required="true" 
							placeholder="<spring:message code="webapp.page.user.password.old.placeholder" />" /></td>
					</tr>
					<tr>
						<td style="text-align: right;"><spring:message code="webapp.page.user.password.new" /></td>
						<td style="padding:5px 20px;"><input class="form-control" type="password"
							name="newPassword" required="true" 
							placeholder="<spring:message code="webapp.page.user.password.new.placeholder" />" /></td>
					</tr>
					<tr>
						<td style="text-align: right;"><spring:message code="webapp.page.user.password.re" /></td>
						<td style="padding:5px 20px;"><input class="form-control" type="password"
							name="rePassword" required="true" 
							placeholder="<spring:message code="webapp.page.user.password.re.placeholder" />" /></td>
					</tr>
					<tr>
						<td style="text-align: right;" class="title"><spring:message code="webapp.page.user.password.captcha" /></td>
						<td style="padding:20px;">
							<img style="cursor: pointer; vertical-align: middle; margin-top: 10px;float: left;"
								id="captchaImg" class="captchaImg easyui-tooltip display-hidden"
								alt="<spring:message code="webapp.page.user.password.captcha" />" 
								title="<spring:message code="webapp.page.user.password.recaptcha" />" />
							<input id="captcha" name="captcha"
							class="form-control" required="true" style="float: left; width: 120px !important; margin-top: 13px; margin-left: 10px;"
							placeholder="<spring:message code="webapp.page.user.password.captcha.placeholder" />" />
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div style="padding: 5px; margin: 20px">
			<a id="updateBtn" href="javascript:void(0)" class="btn btn-primary" style="margin-left:195px;"
				data-options="iconCls:'icon-ok'" onclick="submitForm()">
				<spring:message code="webapp.constant.modify" />
			</a> 
			<a href="javascript:void(0)" class="btn btn-primary"
				data-options="iconCls:'icon-undo'" onclick="clearForm()">
				<spring:message code="webapp.constant.reset" />
			</a>
		</div>
	</div>
	<script>
		function getCaptcha() {
			var captchaType = 'UpdatePasswordCaptcha';
			$.ajax({
				type : "get",
				url : "/captcha/key",
				data : {
					captchaType : captchaType
				},
				dataType : "json",
				error : function() {
					showSysMsg('<spring:message code="webapp.page.user.password.captcha.error" />');
				},
				success : function(data) {
					if (data.code==0){
						var captchaKey = data.data;
						$('#passwordForm input#captchaKey').val(captchaKey);
						$("#captchaImg").attr("src", "/captcha/img?captchaType=" + captchaType
								+ "&&captchaKey=" + captchaKey).removeClass("display-hidden");
					} else{
						showSysMsg(data.message);
					}
				}
			});
		}
		function submitForm() {
			$('#passwordForm').ajaxSubmit( function(data) {
				clearForm();
				if (data.code == 0) {
					showSysMsg(0,'<spring:message code="webapp.page.user.password.submitSuss" />');
				} else {
					showSysMsg(1,data.message);
				}
				getCaptcha();
				$("input[name='password']").focus();
			});
		}
		function clearForm() {
			$('#passwordForm')[0].reset();
		}
		$(document).ready(function() {
			$('#passwordForm').validate();
			$("#captchaImg").click(function() {
				getCaptcha();
			});
			$('body').on("keydown", function(event) {
				var key = event.which;
				if (key == 13) {
					event.preventDefault();
					$('#updateBtn').click();
				}
			});
			$("#captchaImg").click();
			$("input[name='password']").focus();
		});
	</script>
</body>
</html>

